<template>
  <el-header>
    <div class="headConleft">
      <span>
        <div class="toggle-button" v-if="!isCollapseComputed" @click="toggleCollapse"><i class="el-icon-s-fold" style="font-size: 20px;"></i></div>
        <div class="toggle-button" v-if="isCollapseComputed" @click="toggleCollapse"><i class="el-icon-s-unfold" style="font-size: 20px;"></i></div>
      </span>
      <dashbread-components /> <!-- 导航面包屑组件 -->
    </div>
    <div class="roleinfoBox">
      <el-tooltip content="全局主题颜色" effect="dark" placement="bottom" style="display: none;">
        <theme-picker></theme-picker>
      </el-tooltip>
      <el-tooltip content="全局元素尺寸" effect="dark" placement="bottom">
        <size-select id="size-select" class="right-menu-item hover-effect" />
      </el-tooltip>
      <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
      </el-tooltip>
      <el-tooltip content="退出账号" effect="dark" placement="bottom">
        <i class="iconfont icon-close" @click="logout()" style="cursor: pointer; margin-right: 10px;font-size: 20px;"></i>
      </el-tooltip>
      <el-dropdown style="cursor: pointer;" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar class="avatar" fit="cover" :icon="!this.userInfo.head_img?'el-icon-user-solid':''" :src="!this.userInfo.head_img?'':this.$fileserver + this.userInfo.head_img"></el-avatar>
          <i class="el-icon-caret-bottom" style="margin-right: 10px;"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="flexSetting">布局设置</el-dropdown-item>
          <el-dropdown-item command="userSetting">个人设置</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <drawer-components /> <!-- 布局设置组件 -->
  </el-header>
</template>

<script>
import Screenfull from '@/common/Screenfull'
import SizeSelect from '@/common/SizeSelect'
import DashbreadComponents from '@/components/DashbreadComponents' // 面包屑组件
import DrawerComponents from '@/components/DrawerComponents' // 布局设置抽屉组件
import ThemePicker from '@/components/ThemePicker.vue'
export default {
  components: {
    Screenfull,
    SizeSelect,
    DashbreadComponents,
    DrawerComponents,
    ThemePicker
  },
  computed: {
    isCollapseComputed() {
      return this.$store.state.aside.isCollapseState
    },
    userInfo() {
      return this.$store.state.user.user
    }
  },
  data() {
    return {
      drawer: false
    }
  },
  created() {
    this.getUserInfo() // 获取当前用户信息
  },
  methods: {
    // 点击按钮切换菜单的展开，与折叠
    toggleCollapse() {
      this.$store.commit('collapseMenuMutations')
      // this.isCollapse = !this.isCollapse
    },
    // 用户头像下拉菜单处罚指令回调
    handleCommand(command) {
      // console.log(command)
      if (command === 'userSetting') {
        this.$router.push({
          name: 'Setting'
        })
      } else if (command === 'usercheckout') {
        this.logout()
      } else if (command === 'flexSetting') {
        this.$store.dispatch('changeSetting', {
          key: 'drawerVisible',
          value: true
        })
      }
    },
    // 获取用户信息
    async getUserInfo() {
      if (this.$store.state.user.user instanceof Object &&
        Object.keys(this.$store.state.user.user).length === 0) {
        this.$store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          // console.log('用户信息拉取成功')
        })
      }
    },
    logout() {
      this.$store.dispatch('LogOut').then(res => {
        this.$message.success('账号已退出！')
        this.$router.push({ name: 'Login' })
        window.location.reload()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .el-header {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    font-size: 20px;
    .headConleft {
      display: flex;
      justify-content: space-between;
      span {margin-right: 15px;}
    }
    .roleinfoBox {
      display: flex;
      align-items: center;
      float:right;
    }
    .toggle-button {
      font-size: 10px;
      line-height: 24px;
      text-align: center;
      letter-spacing: 0.2em;
      cursor: pointer;
      margin-left: 12px;
    }
  }
</style>
